<script setup>
  import { MenuRound } from '@vicons/material'
  import { Icon } from '@vicons/utils'

  const emit = defineEmits(['openSidebar'])
</script>

<template>
  <div class="flex items-center p-1 bg-slate-900 text-slate-200">
    <button
      class="inline-flex items-center justify-center w-10 h-10 rounded-md focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white hover:ring-2 hover:ring-inset hover:ring-slate-400 "
      @click="emit('openSidebar')">
      <Icon size="28">
        <MenuRound />
      </Icon>
    </button>

    <!-- <div class="flex items-center justify-center flex-1">
      <img src="/logo2_inverse_sm.png" class="w-auto border-green-500 h-7" />
    </div> -->

    <!-- <h1 class="flex items-center justify-center flex-1 text-base font-normal text-center">
      <img src="/logo.png" class="w-auto border-green-500 h-7" />
    </h1> -->
  </div>
</template>